<template>
  <div class="h-input h-flex">
    <span class="is-require" v-if="calcOption.isRequire">*</span>
    <span class="prefix" v-if="calcOption['prefix-text']">
      <span v-html="calcOption['prefix-text']" :title="calcOption['suffix-text']"></span>
    </span>
    <div class="ele-fix">
      <el-input v-bind="calcOption" v-model="model"></el-input>
    </div>
    <span class="suffix" v-if="calcOption['suffix-text']">
      <span v-html="calcOption['suffix-text']" :title="calcOption['suffix-text']"></span>
    </span>
  </div>
</template>
<script name="h-input">
export default {
  name: 'hInput',
  data () {
    return {
      model: '',
    }
  },
  computed: {
    /**
     * 功能：配置信息
     */
    calcOption () {
      if (this.configure) {
        return this.configure
      } else {
        return {}
      }
    },
  },
  watch: {
    'configure.value': {
      handler (val) {
        this.model = val || this.model
      },
      immediate: true,
      deep: true,
    },
  },
  props: {
    configure: {
      type: Object,
    },
  },
  methods: {
    /**
     * 功能：校验当前规则
     */
    verifyRule () {
      return true
    },
  },
}
</script>
<style lang="scss" scoped>
.h-flex {
  display: flex;
  align-items: center;
  .prefix,
  .suffix {
    padding: 5px;
    margin: 0 5px;
    color: $color-text-link-secondary;
    width: 140px;
    // text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .prefix {
    text-align: right;
    margin: 0 15px;
  }
  .ele-fix {
    text-align: left;
  }
}
</style>
